<template>
  <div class="healthrecord">
    <header>
      <van-nav-bar title="健康档案" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </header>
    <main>
      <p>*以下为必填项</p>
      <div class="part1">
        <van-form validate-first @failed="onFailed">
          <p>
            <span>名字:</span>
            <van-field
              v-model="value1"
              name="validator"
              placeholder="请输入名称"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
          </p>
          <div class="sex">
            <span>性别:</span>
            <van-radio-group v-model="radio">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </div>
          <div class="birthday">
            <span>出生日期:</span>
            <van-cell title="出生日期:" :value="date" @click="show = true" />
            <van-calendar v-model="show" @confirm="onConfirm" />
          </div>
        </van-form>
      </div>
      <p>*以下为选填选项</p>
      <div class="part1">
        <van-form validate-first @failed="onFailed">
          <p>
            <span>手机号:</span>
            <van-field
              v-model="valueTel"
              name="validatorTel"
              placeholder="请输入手机号"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
          </p>
          <p>
            <span>身份证号:</span>
            <van-field
              v-model="valueID"
              name="validator"
              placeholder="请输入身份证号"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
          </p>
          <p>
            <span>身高:</span>
            <van-field
              v-model="valueTall"
              name="validator"
              placeholder="请输入身高"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
          </p>
          <p>
            <span>体重:</span>
            <van-field
              v-model="valueWeight"
              name="validator"
              placeholder="请输入体重"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
          </p>
          <p>
            <span>腰围:</span>
            <van-field
              v-model="valueYao"
              name="validator"
              placeholder="请输入腰围"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
          </p>
        </van-form>
      </div>
      <div class="icons">
        <p>饮酒习惯</p>
        <ul>
          <li
            v-for="(item) in list[0].title"
            :key="item.id"
            :class="item.flag?'active1':''"
            @click="change(item.id)"
          >{{item.title}}</li>
        </ul>
        <p>肝功能</p>
        <ul>
          <li
            v-for="(item,index) in list[1].title"
            :key="index"
             :class="item.flag?'active1':''"
            @click="changeg(item.id)"
          >{{item.title}}</li>
        </ul>
        <p>肾功能</p>
        <ul>
          <li
            v-for="(item,index) in list[2].title"
            :key="index"
             :class="item.flag?'active1':''"
            @click="changes(item.id)"
          >{{item.title}}</li>
        </ul>
        <p>婚姻状况</p>
        <ul>
          <li
            v-for="(item,index) in list[3].title"
            :key="index"
             :class="item.flag?'active1':''"
            @click="changehy(item.id)"
          >{{item.title}}</li>
        </ul>
        <p>生育状况</p>
        <ul>
          <li
            v-for="(item,index) in list[4].title"
            :key="index"
             :class="item.flag?'active1':''"
            @click="changesy(item.id)"
          >{{item.title}}</li>
        </ul>
        <p>疾病史</p>
        <ul>
          <li
            v-for="(item,index) in list[5].title"
            :key="index"
            :class="item.flag?'active1':''"
            @click="changejb(item.id)"
          >{{item.title}}</li>
        </ul>
      </div>
    </main>
    <footer>
      <van-button color="#597ef7">立即提交</van-button>
    </footer>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "healthrecord",
  data() {
    return {
      value1: "",
      valueTel: "",
      valueID: "",
      valueTall: "",
      valueWeight: "",
      valueYao: "",
      radio: "1",
      date: "",
      show: false,
      list: [
        {
          id: 1,
          title: [
            { title: "无饮酒", flag: false, id: 11 },
            { title: "少量", flag: false, id: 12 },
            { title: "嗜酒", flag: false, id: 13 }
          ]
        },
        {
          id: 2,
          title: [
            { title: "肝功能正常", flag: false, id: 21 },
            { title: "肝功能异常", flag: false, id: 22 }
          ]
        },
        {
          id: 6,
          title: [
            { title: "肾功能正常", flag: false, id: 61 },
            { title: "肾功能异常", flag: false, id: 62 }
          ]
        },
        {
          id: 3,
          title: [
            { title: "未婚", flag: false, id: 31 },
            { title: "已婚", flag: false, id: 32 },
            { title: "离异", flag: false, id: 33 }
          ]
        },
        {
          id: 4,
          title: [
            { title: "未生育", flag: false, id: 41 },
            { title: "备孕期", flag: false, id: 42 },
            { title: "怀孕中", flag: false, id: 43 },
            { title: "已生育", flag: false, id: 44 }
          ]
        },
        {
          id: 5,
          title: [
            { title: "高血压", flag: false, id: 51 },
            { title: "糖尿病", flag: false, id: 52 },
            { title: "心脏病", flag: false, id: 53 },
            { title: "过敏性疾病", flag: false, id: 54 },
            { title: "哮喘", flag: false, id: 55 },
            { title: "白癜风", flag: false, id: 56 },
            { title: "癫痫", flag: false, id: 57 }
          ]
        }
      ],
     
    };
  },
  methods: {
    validator(val) {
      return /1\d{10}/.test(val);
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    change(index) {
      let cen = this.list[0].title.findIndex(item => item.id === index);
      this.list[0].title[cen].flag = !this.list[0].title[cen].flag;
    },
    changeg(index) {
       let cen = this.list[1].title.findIndex(item => item.id === index);
      this.list[1].title[cen].flag = !this.list[1].title[cen].flag;
    },
    changes(index) {
      let cen = this.list[2].title.findIndex(item => item.id === index);
      this.list[2].title[cen].flag = !this.list[2].title[cen].flag;
    },
    changehy(index) {
      let cen = this.list[3].title.findIndex(item => item.id === index);
      this.list[3].title[cen].flag = !this.list[3].title[cen].flag;
    },
    changesy(index) {
      let cen = this.list[4].title.findIndex(item => item.id === index);
      this.list[4].title[cen].flag = !this.list[4].title[cen].flag;
    },
    changejb(index) {
      let cen = this.list[5].title.findIndex(item => item.id === index);
      this.list[5].title[cen].flag = !this.list[5].title[cen].flag;
    }
  }
};
</script>

<style>
.healthrecord {
  width: 3.75rem;
  height:auto;
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
}
.active1 {
  background: #4f9dfe;
  color: white;
}
main {
  flex: 1;
  overflow: scroll;
}
main > p {
  height: 0.3rem;
  line-height: 0.3rem;
}
.part1 {
  padding: 0.1rem;;
  border-radius: 0.2rem;
  background: white;
}
.sex {
  display: flex;
  align-items: center;
}

.van-radio-group {
  margin-left: 0.9rem;
}
.van-cell__title {
  display: none;
}
.van-cell__value {
  text-align: center;
}
.van-form > p {
  display: flex;
  justify-content: space-between;
}
.van-form > p span {
  float: left;
  margin-top: 0.15rem;
}
.van-cell {
  width: 70%;
}
.van-radio-group {
  display: flex;
}
.birthday {
  display: flex;
  align-items: center;
}

.icons ul li {
  display: inline-block;
  width: 0.8rem;
  height: 0.3rem;
  text-align: center;
  border: 0.01rem solid grey;
  border-radius: 20px;
  line-height: 0.3rem;
  margin: 0rem 0.05rem;
  border: 0.01rem solid #4f9dfe;
  color: #4f9dfe;
}
.icons p {
  padding: 0.1rem;
}
footer {
  display: flex;
  justify-content: center;
  height: 0.8rem;
  align-items: center;
}
.van-button {
  width: 70%;
  height: 0.5rem;
  border-radius: 0.2rem;
}
.active1 {
  background: skyblue;
  color: white;
}
</style>